<template>

     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->
    <el-dialog
      title="修改轮播图"
      :visible.sync="dialogVisible"
      width="50%">


      <!-- :model 将数据form赋值给表单内组件 -->
      <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px;">
        <el-form-item label="文件类型">
           <el-select v-model="form.fileType" placeholder="请选择文件类型">
             <el-option label="图片" value="1"></el-option>
             <el-option label="视频" value="2"></el-option>
           </el-select>
         </el-form-item>
        <el-form-item label="投放页面">
           <el-select v-model="form.category" placeholder="清选择">
             <el-option label="首页轮播图" value="首页轮播图"></el-option>
             <el-option label="产品SE01" value="SE01"></el-option>
             <el-option label="产品PM01" value="产品PM01"></el-option>
             <el-option label="产品SA01" value="产品SA01"></el-option>
             <el-option label="产品S2" value="产品S2"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="投放位置">
           <el-select v-model="form.sectionName" placeholder="清选择">
             <el-option label="新闻与更新" value="新闻与更新"></el-option>
           </el-select>
            <!-- <el-select v-model="form.sectionName" placeholder="清选择">
              <el-option
              v-for="(item,index) in sectionNameOption"
              :key="index"
              label="首页轮播图" value="首页轮播图"></el-option>
              <el-option
                :label="sectionNameOption.label"
                :value="sectionNameOption.value">
              </el-option>
            </el-select> -->
          </el-form-item>

        <el-form-item label="图片地址" v-if="form.fileType==='1'">
          <div class="row">
            <el-input v-model="form.imageUrl"></el-input>
            <el-upload
              class="upload-demo"
              :action="uploadHost"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="视频地址" v-if="form.fileType==='2'">
          <div class="row">
            <el-input v-model="form.videoUrl"></el-input>
            <el-upload
              class="upload-demo"
              :action="uploadHost"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="handleRemoveVideo"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccessVideo"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>


        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>




      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>

    </el-dialog>


</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { updateBanner } from '../../../../api/system/home_banner'; // 引入特定的方法
      import { imageHost } from '@/api/ImageHost';
      import { uploadHost } from '@/api/UploadHost'
      export default{
         props: {
            // 定义一个名为 'message' 的 prop，并指定其类型为 String
            // 可以定义更多 prop...
            form:{
                fileType:''
            }

         },

        data(){
          return{
            uploadHost:'',
            imageHost:'',
            dialogVisible:false,
            fileList : []
            // PickBean:{fileType:'1'}
          }
        },
        created(){
          this.imageHost=imageHost();
          this.uploadHost = uploadHost()

        },
        methods:{
          showDialog(){
            this.dialogVisible=true;
          },

          handleRemove(file, fileList) {
            console.log(file, fileList);
            // 移除图片地址
            this.form.imageUrl='';

          },
          handlePreview(file) {
            console.log(file);

          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
           // 当文件上传成功时触发
          handleSuccess(response, file, fileList) {
                console.log('服务器响应:', response);
                // 包含当前上传源文件的所有内容
                console.log('上传的文件:', file);
                // 包含源文件列表的所有内容
                console.log('当前文件列表:', fileList);

                // 在这里可以对响应数据进行处理
                // 比如将服务器返回的数据保存到 Vuex 或者本地状态中
                // 将图片地址放入表单
                this.form.imageUrl='https://ai.itnewers.com/files/config/'+response.data;

          },
          handleRemoveVideo(file, fileList){
              // 移除图片地址
              this.form.videoUrl='';
          },
          handleSuccessVideo(response, file, fileList){
              // 将图片地址放入表单
              this.form.videoUrl='https://ai.itnewers.com/files/config/'+response.data;
          },

          onSubmit(){
            updateBanner(this.form).then(response => {
              console.log(response);
              this.dialogVisible=false;
              // this.$emit('custom-event', data); // 触发自定义事件，并传递数据给父组件
              this.$emit('custom-event');

            });


          }

        }


      }
</script>

<style scoped>
    .line_image{
        display: flex;
        flex-direction: row;

    }
    .line_image_margin{
        display: flex;
        flex-direction: row;
        margin-top: 30px;
    }
    .line_image_lable{
        width: 70px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
    .upload-demo{
        margin-left: 15px;

    }
    .image_label{
        color: #666666;
    }


    .row{
      display: flex;
    }

</style>
